<template>
  <view class="container">
    <titleBar :titleText='"提现记录"' :pageForm='"withdraw_log"'></titleBar>
    <view class="uni-padding-wrap uni-common-mt">
      <uni-segmented-control :current="type" :values="items" style-type="button" active-color="#007aff"
                             @clickItem="changeType"/>
    </view>
    <view class="content">
      <view v-if="type === 0">

        <u-card
            v-for="item in dataList"
            :key="item.id"
            :title="getTitle(item)"
            :sub-title="item.status_text"
            :sub-title-color="getStatusColor(item.status)"
        >
          <view class="" slot="body">
            <view >
              <text class="title1">收款账号：{{ item.account }}</text>
              <text class="title2"  >收款姓名：{{ item.username }} </text>
            </view>
            <view class="margin-10" >
              <text class="title1">申请金额：{{ getMoney(item) }} 元</text>
              <text class="title2">手续费率：{{ item.fee_percent }}%</text>
            </view>
            <view class="margin-10" >
              <text class="title1">到账金额：{{ item.num }} 元</text>
              <text class="title2">手续费：{{ item.fee }} 元</text>
            </view>
            <view class="fail_rason margin-10" v-if="item.status==-1">
              <text class="fail_rason_stitle">驳回原因</text> ： {{item.fail_text}}
            </view>
            <view class="margin-10" v-if="item.status==1 && item.imgs">
              <text class="stitle">转账凭证：</text>
              <image :src="item.imgs" style="width:100rpx;height:100rpx" @click="preview(item.imgs)" ></image>
            </view>
          </view>
        </u-card>
        <u-empty v-if="dataList.length==0" text="暂无记录" mode="list"></u-empty>

      </view>
      <view v-if="type === 1">
        <u-card
            v-for="item in dataList"
            :key="item.id"
            :title="getTitle(item)"
            :sub-title="item.status_text"
            :sub-title-color="getStatusColor(item.status)"
        >
          <view class="" slot="body">
            <view >
              <text class="title1">收款账号：{{ item.account }}</text>
              <text class="title2"  >收款姓名：{{ item.username }} </text>
            </view>
            <view class="margin-10" >
              <text class="title1">申请金额：{{ getMoney(item) }} 元</text>
              <text class="title2">手续费率：{{ item.fee_percent }}%</text>
            </view>
            <view class="margin-10" >
              <text class="title1">到账金额：{{ item.num }} 元</text>
              <text class="title2">手续费：{{ item.fee }} 元</text>
            </view>
            <view class="fail_rason margin-10" v-if="item.status==-1">
              <text class="fail_rason_stitle">驳回原因</text> ： {{item.fail_text}}
            </view>
            <view class="margin-10" v-if="item.status==1 && item.imgs">
              <text class="stitle">转账凭证：</text>
              <image :src="item.imgs" style="width:100rpx;height:100rpx" @click="preview(item.imgs)" ></image>
            </view>
          </view>
        </u-card>
        <u-empty v-if="dataList.length==0" text="暂无记录" mode="list"></u-empty>

      </view>
      <view v-if="type === 2">
        <u-card
            v-for="item in dataList"
            :key="item.id"
            :title="getTitle(item)"
            :sub-title="item.status_text"
            :sub-title-color="getStatusColor(item.status)"
        >
          <view class="" slot="body">
            <view >
              <text class="title1">收款账号：{{ item.account }}</text>
              <text class="title2"  >收款姓名：{{ item.username }} </text>
            </view>
            <view class="margin-10" >
              <text class="title1">申请金额：{{ getMoney(item) }} 元</text>
              <text class="title2">手续费率：{{ item.fee_percent }}%</text>
            </view>
            <view class="margin-10" >
              <text class="title1">到账金额：{{ item.num }} 元</text>
              <text class="title2">手续费：{{ item.fee }} 元</text>
            </view>
            <view class="fail_rason margin-10" v-if="item.status==-1">
              <text class="fail_rason_stitle">驳回原因</text> ： {{item.fail_text}}
            </view>
            <view class="margin-10" v-if="item.status==1 && item.imgs">
              <text class="stitle">转账凭证：</text>
              <image :src="item.imgs" style="width:100rpx;height:100rpx" @click="preview(item.imgs)" ></image>
            </view>
          </view>
        </u-card>
        <u-empty v-if="dataList.length==0" text="暂无记录" mode="list"></u-empty>

      </view>
    </view>

  </view>
</template>

<script>


import titleBar from '@/components/backTitlebar.vue';

export default {
  components: {
    titleBar
  },

  data() {
    return {
      items: ['全部', '已通过', '未通过'],
      loading: false,
      loadend: false,
      page: 1,
      limit: 10,
      type: 0,
      dataList: [],
      times: [],
    };
  },

  onShow() {

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getData()
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("已滚动到底部");
    this.getData();
  },
  methods: {
    getStatusColor(status) {
      if (status== 0) {
        return "blue";
      }
      if (status==1){
        return "green"
      }
      return 'red';
    },
    getTitle(item){
      return item.to_type_text +'  ('+ item.show_time+')'
    },
    getMoney(item){
      return (Number(item.num) + Number(item.fee)).toFixed(2)
    },
    getData: function () {
      let that = this;
      if (that.loading) return;
      if (that.loadend) return;
      that.loading = true;
      that.loadTitle = '';
      this.$http.get('union/api.balance/withdraw_log', {
        page: that.page,
        limit: that.limit,
        type: that.type
      }, true).then(res => {
        that.dataList = that.page === 1 ? res.data : that.dataList.concat(res.data);

        that.loadend = res.data.length < that.limit;
        that.page += 1;
        that.loading = false;
      }).catch(err => {
        that.loading = false;
      })
    },
    /**
     * 切换导航
     */
    changeType: function (e) {
      console.log(e.currentIndex)
      if (e.currentIndex !== this.type) {
        this.type = e.currentIndex;
        this.loadend = false;
        this.page = 1;
        this.times = [];
        this.$set(this, 'dataList', []);
        this.getData()
      }
    },
    preview(url){
      uni.previewImage({
      	urls:[url]
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.container{
  margin-bottom: 20rpx;
  padding: 10px;
}
.fail_rason{
  color: red;
  .fail_rason_stitle{
    color: #1B1B1B;
  }
}
.stitle{
  color: #1B1B1B;
}
.title2{
  margin-left: 18rpx;
}
.margin-10{
  margin-top: 20rpx;
}

</style>
